05. Select Page Elements By Class Or Tag

Selecting Multiple Elements At Once

As I'm sure you remember from learning both HTML structure and CSS styling, an ID should be unique - meaning two or more elements should never have the same ID. Since IDs are unique, and since there will be only one element in the HTML with that ID, document.getElementById() will only ever return at most one element. So how would we select multiple DOM elements?

The next two DOM methods that we'll be looking at that both return multiple elements are:

  • .getElementsByClassName()
  • .getElementsByTagName()

Accessing Elements By Their Class

The first method we'll look at is .getElementsByClassName():

document.getElementsByClassName();

Similarly to .getElementById(), if we ran the code above in the console, we wouldn't get anything, because we did not tell it the class to search for! Also just like .getElementById(), .getElementsByClassName() is expecting that we call it with a string of the class we want it to search for/return:

document.getElementsByClassName('brand-color');

If you'd like to read more about this method, check out its documentation page on MDN: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

Let's use this MDN documentation page to try out using this method.

DOM L1 40 - GetElementsByClassName

Beware of the S!

I know we haven't looked at .getElementsByTagName() just yet, but there's something different about .getElementById() compared with both .getElementsByClassName() and .getElementsByTagName() that I want to point out because it can be easy to miss; both .getElementsByClassName() and .getElementsByTagName() have an extra "s" in their name.

The method's name is .getElementsByClassName(), not .getElementByClassName(). Notice the word right in the middle, it's "Elements" not "Element". If you think about it, this actually makes a lot of sense! Since both .getElementsByClassName() and .getElementsByTagName() could return multiple items, their method names tell us that directly. Now compare this with .getElementById() that will only ever return at most one element. Its name has the singular "Element" in it.

I just wanted to point this out because I've been bitten by that missing "s" many-a-time when running code like:

document.getElementByClassName('highlight-spanned');

This code above will not work, because there is no DOM method .getElementByClassName() (with singular "Element").

Accessing Elements By Their Tag

After looking at both .getElementById() and .getElementsByClassName(), the new .getElementsByTagName() method should seem quite easy on the eyes:

document.getElementsByTagName('p');

Let's use this MDN documentation page to try out using this method: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction

DOM L1 43 - GetElementsByTagName

Which of the following would correctly select all elements with class: 'splort'?
SOLUTION:
  • `document.getElementsByClassName('splort');`

QUESTION:

Write the DOM code to select all <article> elements.

SOLUTION:

NOTE: The solutions are expressed in RegEx pattern. Udacity uses these patterns to check the given answer

QUESTION:

Write the DOM code to select all elements with class: fancy-footer.

SOLUTION:

NOTE: The solutions are expressed in RegEx pattern. Udacity uses these patterns to check the given answer

What's Returned?

DOM L1 48 - Returns An Array Like

We just saw that .getElementsByClassName() returns an array-like data structure of elements. But what exactly is an element?

In the next section, we'll take the plunge and look at Elements and Nodes.

Selecting Multiple Elements At Once Recap

In this section, we learned two ways to select multiple DOM elements:

  • .getElementsByClassName()
  • .getElementsByTagName()

There are a few important things to keep in mind about these two methods:

  • both methods use the document object
  • both return multiple items
  • the list that's returned is not an array
// select all elements that have the class "accent-color"
document.getElementsByClassName('accent-color');

// select all "span" elements
document.getElementsByTagName('span');

Further Research

Next Concept